<script>
import SoundTypeList from "@/views/aihuman/HumanAssets/soundType/SoundTypeList.vue";
import {getListByType} from "@/api/aihuman/humanAssets/soundType";

export default {
  name: "soundType",
  components: {SoundTypeList},
  data() {
    return {
      activeName: '',
      tabsList: []
    }
  },
  created() {
    this.getType()
  },
  methods: {
    handleTab(tab) {
      console.log(tab);
      this.$refs.listRef.page.currentPage = 1
      this.$refs.listRef.soundGroupId = tab.name
      this.$refs.listRef.getList()
    },
    async getType() {
      const {data} = await getListByType({type: 2})
      this.tabsList = data.data
      this.activeName = this.tabsList[0].id

      this.$refs.listRef.page.currentPage = 1
      this.$refs.listRef.soundGroupId = this.activeName
      await this.$refs.listRef.getList()
    }
  }
}
</script>

<template>
  <huilan-basic has-tab>
    <el-tabs v-model="activeName" @tab-click="handleTab">
      <el-tab-pane
        v-for="(item) in tabsList"
        :key="item.id"
        :label="item.groupName"
        :name="item.id">
      </el-tab-pane>
    </el-tabs>

    <sound-type-list
      ref="listRef"
    />
  </huilan-basic>
</template>

<style scoped lang="scss">

</style>
